<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>机器管理</BreadcrumbItem>
      <BreadcrumbItem>审核列表</BreadcrumbItem>
    </Breadcrumb>

    <Form ref="formInline" :model="request" inline>
      <FormItem>
        机器名: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        机器识别码: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        软件识别码: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        机器状态: <Input type="text" clearable style="width: 120px;"/>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
      </FormItem>
    </Form>

    <div>
      <span>注释：（仅作为解释说明）
1.所有搜索支持模糊搜索
</span>
    </div>
    <div>
      <Table :columns="columns1" :data="data" :height="height">
        <!--        上传文件是否成功的判断-->
        <template slot-scope="{ row }" slot="option">
          <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px">通过</Button>
        </template>
      </Table>
    </div>
    <!--    分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20"
            :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        device_time: [],
        status: 1,
        user_id: "",
        order_id: "",
        activity_id: "",
        page: 1,
        limit: 10,
      },
      total: 0,
      page: {},
      height: this.$store.state.height,
      data1: [
        {
          id: 1,
          title: "机器组3",
        },
        {
          id: 2,
          title: "机器组4",
        },
      ],
      request: {
        device_number: "",
        page: 1,
      },
      columns1: [
        {
          title: "机器名",
          key: "device_name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "机器识别码",
          key: "device_code",
          minWidth: 150,
          align: "center"
        },
        {
          title: "软件识别码",
          key: "device_id",
          minWidth: 300,
          align: "center"
        },
        {
          title: '机器温度',
          key: "device_temperature",
          minWidth: 150,
          align: "center",
        },
        {
          title: "机器状态",
          key: "device_status",
          minWidth: 150,
          align: "center",
        },
        {
          title: "创建时间",
          key: "submit_time",
          minWidth: 150,
          align: "center",
        },
        {
          title: "操作",
          slot: "option",
          minWidth: 200,
          align: "center",
        }
      ],
      data: [
        {
          device_name: 'B6790',
          device_id: '53545',
          device_code: 18,
          device_temperature: '37.5',
          device_status: '正常',
          submit_time: '2021-09-18'

        },
        {
          device_name: 'B36460',
          device_id: '887',
          device_code: 19,
          device_temperature: '37.5',
          device_status: '异常',
          submit_time: '2021-09-19'
        }
      ],
      role_id: null,
    };
  },
  mounted() {

    this.init();
  },
  methods: {
    init() {
      this.axios.post("order/order_list", this.params).then((res) => {
        console.log("this.params: ", this.params);
        if (res.code == 1) {
          console.log(res);
          this.total = res.data.count;
          this.tableData = res.data.list;
        }
      });
    },
    search() {
      this.params.page = 1;
      this.init();
    },
    confirm() {
      this.modal1 = false;
      this.$Message.success("保存成功！");
      this.cancel();
    },
    cancel() {
    },
    lists() {
    },
    timechange(val) {
      console.log(val);
    },
    handleSizeChange(val) {
      this.request.page = 1;
      this.request.limit = val;
      this.lists();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.init();
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.door_device {
  position: relative;
  top: -20px;
}

.vertical {
  font-size: 16px;

}
</style>
